<template>
	<div class="pages">
		<div class="tit">额度设置</div>
		<el-form size="small" ref="dataForm" :rules="rules" :model="dataForm" label-width="160px" class="demo-ruleForm">
			<el-form-item label="平台创制券总额(元)" prop="total_coupons">
				<el-input v-model="dataForm.total_coupons" placeholder="请输入平台创制券总额" clearable></el-input>
			</el-form-item>
			<el-form-item label="企业创制券总额(元)" prop="corp_coupons">
				<el-input v-model="dataForm.corp_coupons" placeholder="请输入企业创制券总额" clearable></el-input>
			</el-form-item>
			<el-form-item label="剩余创制券总额(元)">
				<el-input v-model="yu" placeholder="请输入剩余创制券总额" disabled></el-input>
			</el-form-item>
			<el-form-item style="text-align: right;">
				<el-button type="primary" @click="submitForm">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataForm: {
					total_coupons: 0,
					corp_coupons: 0,
					is_post: 1,
				},
				rules: {
					total_coupons: [{
						required: true,
						message: '请输入平台创制券总额',
						trigger: 'blur'
					}],
					corp_coupons: [{
						required: true,
						message: '请输入企业创制券总额',
						trigger: 'blur'
					}],
				}
			}
		},
		computed: {
			yu() {
				return Number(this.dataForm.total_coupons) - Number(this.dataForm.corp_coupons)
			}
		},
		methods: {
			submitForm() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()
						this.$http.post('/api/settings/setting_coupons', this.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.getInfo()
								}
							});
						})

					} else {
						return false;
					}
				});
			},
			getInfo() {
				this.$loading()
				this.$http.post('/api/settings/setting_coupons', {}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
				})
			}
		},
		created() {
			this.getInfo()
		}
	}
</script>

<style scoped lang="scss">
	.tit {
		font-weight: 500;
		font-size: 18px;
		color: #333333;
		line-height: 25px;
		text-align: left;
		font-style: normal;
	}

	.demo-ruleForm {
		width: 500px;
		margin-top: 45px;
	}
</style>